import React from 'react';
import {Button, message} from 'antd';
import MapBD from './index';
import MapTool from './MapTool';
import MapToolLib from './MapToolLib';

const {BMap} = window;

/**
 * 百度地图示例
 */
export default class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMR: false //是否展示自动搜索组件
    };
    this.polygons = []; //绘制的多边形
  }

  render() {
    let propsMBD = {
      ref: (MapBD) => (this.MapBD = MapBD), //获取当前组件
      style: {height: document.documentElement.clientHeight},
      customBody: this.renderCustomBody(),
      mapOptions: {
        center: '深圳',
        onDragEnd: (e) => console.log(e) //拖拽结束事件
      }
    };

    return <MapBD {...propsMBD} />;
  }

  /**
   * 百度地图自定义内容
   */
  renderCustomBody() {
    return (
      <div>
        <Button type="primary" onClick={this.onClickLocation}>
          定位
        </Button>
        <Button type="primary" onClick={this.onClickDrive}>
          驾车
        </Button>
        <Button type="primary" onClick={this.onClickDraw}>
          鼠标绘制
        </Button>
        <Button type="primary" onClick={this.onClickPointMass}>
          添加海量点
        </Button>
      </div>
    );
  }

  /**
   * 地图定位
   */
  onClickLocation = () => {
    //浏览器定位
    MapTool.getLocation()
      .then((result) => message.success('定位成功：' + JSON.stringify(result)))
      .catch((err) => message.error('定位成功：' + JSON.stringify(err)));
  };

  /**
   * 规划驾车路线
   */
  onClickDrive = () => {
    let config = {
      start: MapTool.getPoint({lng: 116.310791, lat: 40.003419}),
      end: MapTool.getPoint({lng: 116.486419, lat: 39.877282})
    };

    let callback = () => {
      this.times = this.times || 0;
      this.times++;
      let {lng, lat} = config.start;
      //修改起点坐标
      config.start = MapTool.getPoint({lng: lng - 0.001 * this.times, lat: lat - 0.001 * this.times});

      //规划驾车路线
      this.MapBD.routeDrive(config);
    };
    setInterval(callback, 5000);
  };

  /**
   * 鼠标绘制
   */
  onClickDraw = () => {
    let callback = (data, overlay) => {
      let poly = this.polygons[0];
      //当两区域有两个交点时，自动贴边
      let array = MapToolLib.welPolygon(poly, overlay);
      if (array) {
        //标记array中的顶点
        array.forEach((item, index) => {
          let marker = MapTool.addPoint(this.MapBD.map, item);
          marker.setLabel(new BMap.Label(index));
        });
      }
      //如果没有自动贴边，并且区域相交时，则报错
      if (!array && MapToolLib.isPolygonIntersect(poly, overlay)) {
        message.error('两个区域不能相交');
        return;
      }
      this.polygons.push(overlay);
    };
    let config = {
      data: {num: 10},
      canEdit: false,
      callback
    };
    this.MapBD.drawOpen(config);
  };

  /**
   * 添加海量点
   */
  onClickPointMass = () => {
    //模拟海量点数据
    if (!this.dataList) {
      let size = 20000;
      // size = 300;
      let start = {x: 74, y: 28};
      this.pointList = [];
      this.dataList = [];
      for (let i = 0; i < size; i++) {
        let lng = start.x + Math.random() * 60;
        let lat = start.y + Math.random() * 14;
        this.pointList.push(MapTool.getPoint({lng, lat}));
        this.dataList.push({title: `坐标为${lng}:${lat}`});
      }
      console.log(this.dataList);
    }
    let options = {
      size: window.BMAP_POINT_SIZE_SMALL,
      shape: window.BMAP_POINT_SHAPE_CIRCLE
      // color: '#d340c3'
    };
    MapTool.addPointMass(this.MapBD.map, {pointList: this.pointList, dataList: this.dataList, options});
  };
}
